<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统 - 登录</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Roboto', '微软雅黑', sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .login_wrap {
            animation: fadeIn 0.8s ease;
            width: 100%;
            max-width: 1200px;
            margin: 0;
            padding: 0;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .form_text_ipt input::placeholder {
            color: #aaa;
        }
        
        .error-message {
            color: #e74c3c;
            text-align: center;
            margin: 10px 0;
            font-size: 14px;
            min-height: 20px;
        }
        
        .success-message {
            color: #2ecc71;
            text-align: center;
            margin: 10px 0;
            font-size: 14px;
        }
        
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .login_box {
            width: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="wrap login_wrap">
    <div class="content">
        <div class="logo"></div>
        <div class="login_box">

            <div class="login_form">
                <div class="login_title">在线考试系统</div>
                <form th:action="@{/CanLogin}" method="post" id="loginForm">
                    <div class="form_text_ipt">
                        <input name="username" type="text" placeholder="用户名/学号" id="username">
                    </div>
                    <div class="ececk_warning" id="username_warning"><span>用户名/学号不能为空</span></div>
                    <div class="form_text_ipt">
                        <input name="userpwd" type="password" placeholder="密码" id="password">
                    </div>
                    <div class="ececk_warning" id="password_warning"><span>密码不能为空</span></div>
                    <div class="error-message" id="error-container">
                        <span th:if="${session.errorInfo != null}" th:text="${session.errorInfo}"></span>
                    </div>
                    <input type="hidden" id="cxdl" th:value="${session.cxdl}"/>
                    
                    <div class="form_check_ipt">
                        <div class="left check_left">
                            <label><input name="remember" type="checkbox"> 下次自动登录</label>
                        </div>
                        <div class="right check_right">
                            <a href="#">忘记密码</a>
                        </div>
                    </div>
                    <div class="form_btn">
                        <button type="submit" id="login-btn">登录</button>
                    </div>
                    <div class="form_reg_btn">
                        <span>还没有帐号？</span><a th:href="@{/register}">马上注册</a>
                    </div>
                </form>
                <div class="other_login">
                    <div class="left other_left">
                        <span>其它登录方式</span>
                    </div>
                    <div class="right other_right">
                        <a href="#"><i class="fa fa-qq fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weixin fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weibo fa-2x"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Handle password change success message
        var cxdl = $("#cxdl").val();
        if (cxdl) {
            $("#error-container").removeClass("error-message").addClass("success-message");
            $("#error-container").html("<span>密码修改成功，请登录！</span>");
            setTimeout(function() {
                location.replace("./llogout");
            }, 2000);
        }
        
        // Handle error message auto-hide
        if ($("#error-container").text().trim() !== "") {
            setTimeout(function() {
                $("#error-container").fadeOut(500, function() {
                    $(this).text("").fadeIn(0);
                    location.replace("./llogout");
                });
            }, 3000);
        }
        
        // Form validation
        $("#loginForm").submit(function(e) {
            var username = $("#username").val().trim();
            var password = $("#password").val().trim();
            var isValid = true;
            
            if (username === "") {
                $("#username_warning").css("display", "block");
                isValid = false;
            } else {
                $("#username_warning").css("display", "none");
            }
            
            if (password === "") {
                $("#password_warning").css("display", "block");
                isValid = false;
            } else {
                $("#password_warning").css("display", "none");
            }
            
            return isValid;
        });
        
        // Hide warnings when typing
        $("#username").on("input", function() {
            $("#username_warning").css("display", "none");
        });
        
        $("#password").on("input", function() {
            $("#password_warning").css("display", "none");
        });
    });
</script>
</body>
</html>